<template>
	<view class="cus-title">
		<div class="cus-title-left">
			<u-icon v-show="showReturn" @click="onNavigateTo('/pages/home/home')" name="arrow-left" color="#FFFFFF" size="40"></u-icon>
		</div>
		<view class="cus-title-center">
			<view class="cus-title-center-title" @dblclick="ipConfigClick()">
				{{ title }}
			</view>
		</view>
		<view class="cus-title-right">
			<view class="imgs" @click="onNavigateTo('/pages/historyPage/index')">
				<image src="@/static/images/history.png" style="height: 100%;width: 100%;">	
			</view>
			<view class="imgs" @click="setting">
				<image src="@/static/images/setting.png" style="height: 100%;width: 100%;">	
				<!-- 修改请求地址 -->
				<changeHttp ref="changeHttp"></changeHttp>
			</view>
			<!--退出登录-->
			<view class="imgs">
				<image src="" style="height: 100%;width: 100%;">	
			</view>
			<slot></slot>
		</view>
	</view>
	
</template>

<script>
	// 修改IP地址组件
	import changeHttp from './components/change-http'
	
	export default {
		name: "cus-header",
		components: {changeHttp},
		data() {
			return {}
		},
		props: {
			showReturn: {
				type: Boolean,
				default: false
			},
			title: {
				type: String,
				default: '出库看板'
			},
		},
		onShow() {
			console.log('页面显示了');
		},
		onReady() {
			console.log('页面初次渲染完成了');
		},
		methods: {
			ipConfigClick() {
				this.$emit('ipConfigClick')
			},
			onNavigateTo(url, item){
			  console.log(url);
			  uni.navigateTo({
			    url: url,
				animationType: 'fade-in',
				animationDuration: 300, // 动画持续时间，单位为ms
			    events: {
			      // 为指定事件添加一个监听器，获取被打开页面传送到当前页面的数据
			      acceptDataFromOpenedPage: function(data) {
			        console.log(data)
			      },
			    },
			    success: (res) => {
			      // 通过eventChannel向被打开页面传送数据
			      res.eventChannel.emit('acceptDataFromOpenerPage', { data: {...item} })
			    }
			  })
			},
			setting() {
				this.$refs['changeHttp'].show();
				// this.$emit('changeHttp')
			},
		}, 
		beforeDestroy() {}
	}
</script>

<style scoped lang="scss">
  .cus-title{
    z-index: 10;
    position: sticky;
    top: 0;
    width: 100%;
    height: 5.17vh;
    display: flex;
    justify-content: space-between;
	align-items: center;
	background: RGBA(52, 145, 255, 1);
	&-left {
		width: 20%;
		height: 100%;
		display: flex;
		align-items: center;
	}
    &-center {
		width: 35%;
		height: 77.5%;
		display: flex;
		align-items: center;
		justify-content: center;
		background: url("../../../static/images/header.png") no-repeat;
		background-size: 100% 100%;
      &-title {
	   margin-left: 40rpx;
	   font-size: 28rpx;
	   font-family: PingFangSC-Semibold, PingFang SC;
	   font-weight: 600;
	   color: #FFFFFF;
      }
    }
	&-right {
		width: 20%;
		height: 100%;
		padding: 0 20rpx;
		display: flex;
		justify-content: space-between;
		align-items: center;
	}
  }
  .imgs {
  	height: 26rpx;
  	width: 26rpx;
  }
</style>
